﻿<phone:PhoneApplicationPage
    x:Class="CodeAbility.MonitorAndCommand.WindowsPhoneController.Pages.LEDs"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:converters="clr-namespace:CodeAbility.MonitorAndCommand.WindowsPhoneController.Converters"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True">
    
    <UserControl.Resources>
        <converters:BooleanToOpacityConverter x:Key="BooleanToOpacity"></converters:BooleanToOpacityConverter>
        <converters:BooleanToBrushConverter x:Key="BooleanToBrush"></converters:BooleanToBrushConverter>
        <converters:BooleanToOnOffConverter x:Key="BooleanToOnOff"></converters:BooleanToOnOffConverter>
    </UserControl.Resources>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text=".NET/Mono Monitor and Command" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock Text="Netduino" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Grid.RowDefinitions>
                <RowDefinition Height="2*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="*"></RowDefinition>
                <!--<RowDefinition Height="*"></RowDefinition>-->
            </Grid.RowDefinitions>

            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Ellipse Grid.Row="0" Fill="Red" 
                     Height="100" Width="100" 
                     Stroke="White" StrokeThickness="3"
                     Opacity="{Binding RedLED, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"
                     HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <Ellipse Grid.Row="1" Fill="Green" 
                     Height="100" Width="100" 
                     Stroke="White" StrokeThickness="3"
                     Opacity="{Binding GreenLED, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"
                     HorizontalAlignment="Center" VerticalAlignment="Center"/>
                <ToggleButton x:Name="RedLedToggle" Grid.Row="0" Grid.Column="1" 
                              Content="{Binding RedLed, Converter={StaticResource BooleanToOnOff}}"
                              Checked="RedLedToggle_Checked" Unchecked="RedLedToggle_Unchecked" 
                              Foreground="Beige"></ToggleButton>
                <ToggleButton x:Name="GreenLedToggle" Grid.Row="1" Grid.Column="1" 
                              Content="{Binding GreenLed, Converter={StaticResource BooleanToOnOff}}"
                              Checked="GreenLedToggle_Checked" Unchecked="GreenLedToggle_Unchecked" 
                              Foreground="Beige"></ToggleButton>
            </Grid>
            
            <TextBlock Grid.Row="1" Text="{Binding RandomValue}"
                       HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="32"></TextBlock>
            <Ellipse Grid.Row="2" Fill="Blue" 
                     Height="100" Width="100" 
                     Stroke="White" StrokeThickness="3"
                     Opacity="{Binding BlueLED, Converter={StaticResource BooleanToOpacity}, FallbackValue=0.25}"
                     HorizontalAlignment="Center" VerticalAlignment="Center"/>

            <!--<Button Grid.Row="3" 
                    FontSize="36" Width="120"
                    HorizontalAlignment="Center" VerticalAlignment="Center" 
                    Content="{Binding ButtonPressed, Converter={StaticResource BooleanToOnOff}, FallbackValue=Off}"
                    BorderBrush="{Binding ButtonPressed, Converter={StaticResource BooleanToBrush}}"
                    Click="Button_Click" />-->
            
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>